<link rel="stylesheet" type="text/css" href="REPLACEBUY_CSS/index.css"/>
<style>
	.layui-form {
		position: relative;
	}
	.layui-form-label {
		text-align: right;
		margin-left: 60px;
	}
	.layui-form-item {
		margin-bottom: 22px;
	}
	.member-select {
		margin-left: 190px; 
		margin-bottom: 30px;
		width: 400px;
		display: block;
		position: relative;
	}
	.member-select-add{
		border:1px solid;
		padding: 5px 10px;
	}
	.layui-unselect.layui-form-radio.layui-form-radioed i:after {
		background-color: #fff;
	}
	.layui-table-body {
		max-height: 530px;
	}
	.inline{width: 205px;}
	.layui-input{width: 205px;}
	.warning-text {
		color: #FF5722;
		margin: 15px 0;
		padding: 10px;
		border: 1px solid #FFB800;
		background-color: #FFFBE5;
		border-radius: 4px;
	}
	.form-row {
		margin-top: 50px;
	}
	.member-detail {
		display: flex;
		align-items: center;
	}
	.title-pic {
		width: 50px;
		height: 50px;
		margin-right: 15px;
		overflow: hidden;
	}
	.title-pic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}
	.title-content {
		flex: 1;
	}
</style>

<div class="layui-form form-wrap">
	<div class="warning-text">
		<i class="layui-icon layui-icon-tips"></i> 
		请仔细核对会员及直推上级会员ID，执行后无法更改！
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>关联会员：</label>
		<button class="layui-btn layui-btn2" onclick="addMember()">选择会员</button>
	</div>
	
	<div class="member-select"></div>
	
	<!-- <div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>上级会员ID：</label>
		<div class="layui-input-block">
			<input name="pid" type="text" lay-verify="required" class="layui-input len-mid" placeholder="请输入上级会员ID">
		</div>
	</div> -->
	
	<div class="form-row">
		<button class="layui-btn" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" type="reset" onclick="backFenxiaoList()">返回</button>
	</div>
</div>

<script type="text/html" id="addMember">
	<div class="layui-form">
		<div class="layui-input-inline inline">
			<input type="text"  name="member_search" placeholder="请输入会员名称" autocomplete="off" class="layui-input ">
			<button type="button" class="layui-btn layui-btn-primary member-search"  lay-filter="search" lay-submit>
				<i class="layui-icon"></i>
			</button>
		</div>
		<table id="member_list" lay-filter="member_list"></table>
	</div>
</script>

<script type="text/javascript">
	var new_member_id = 0, repeat_flag = false, table;
	layui.use(['form', 'laytpl'], function() {
		laytpl = layui.laytpl;
		form = layui.form;

		form.render();
		/**
		 * 监听提交
		 */
		form.on('submit(save)', function(data) {
			data.field.member_id = new_member_id;
			
			if (!new_member_id) {
				layer.msg('请选择会员');
				return false;
			}
			
			$.ajax({
				url: ns.url("lian://shop/member/add"),
				data: data.field,
				dataType: 'JSON', //服务器返回json格式数据
				type: 'POST', //HTTP请求类型
				success: function(res) {
					repeat_flag = false;
					if (res.code == 0) {
						layer.msg(res.message);
						location.hash = ns.hash("lian://shop/member/lists")
					} else {
						layer.msg(res.message);
					}
				}
			});
		});
	})
	
	function backFenxiaoList() {
		location.hash = ns.hash("lian://shop/member/lists");
	}
	
	var add_attr_radioState2 = 0;
	function addMember() {
		var _this = this;
		var add_attr2 = $("#addMember").html();
		form.on('radio(laymemberid)', function(obj){
			new_member_id = obj.value;
			_this.add_attr_radioState2 = obj.value;
		});
		
		laytpl(add_attr2).render({}, function(html) {
			var add_attr_index2 = layer.open({
				title: '选择会员',
				skin: 'layer-tips-class',
				type: 1,
				area: ['1000px', '800px'],
				content: html,
				btn:["保存","返回"],
				yes: function(){
					$.ajax({
						url: ns.url("lian://shop/member/memberInfo"),
						data:{member_id: new_member_id},
						dataType: 'JSON',
						type: 'POST',
						success: function(res) {
							if (res.code == 0) {
								var html = '';
								html += '<div class="member-detail">'
										+'<div class="title-pic">'
										+'<img src="'+ns.img(res.data.headimg)+'" onerror="this.src=\'{:img(\'public/static/img/default_img/head.png\')}\'" />'
										+'</div>'
										+'<div class="title-content">'
										+'<div class="member-con-first">'
										+'<h3 class="nickname" title="'+res.data.nickname+'">'+res.data.nickname+'</h3>'
										+'</div>'
										+'<div class="member-con-second">';
								if(res.data.mobile){
									html += '<p class="text-color-gray"><span class="member-mobile">'+res.data.mobile+'</span></p>'
								}else{
									html += '<p class="text-color-gray"><span class="member-mobile">'+'--'+'</span></p>'
								}

										html+= '</div>'
										+'</div>'
										+'</div>';
								$('.member-select').html(html);
								$('.member-select').addClass('member-select-add border-color');
								layer.close(add_attr_index2);
							} else {
								layer.msg(res.message);
							}
						}
					});
				}
			});
		});
			
		//展示已知数据
		table = new Table({
			elem: '#member_list',
			url: ns.url("lian://shop/member/getmemberlist"),
			cols: [
				[{
					width: "12%",
					title: '会员选择',
					unresize: 'false',
					templet: function(data) {
						var html = '';
						if(data.member_id == Number(add_attr_radioState2)){
							html += `
							<div>
							<input type="radio" name="layTableRadioc" checked = true  value="${data.member_id}" data-index="${data.nickname}" lay-type="layTableRadio" lay-filter="laymemberid">
							</div>
						`;
						}else{
							html += `
							<div>
							<input type="radio" name="layTableRadioc" value="${data.member_id}" data-index="${data.nickname}" lay-type="layTableRadio" lay-filter="laymemberid">
							</div>
						`;
						}
						return html;
					}
				},{
					title: '会员名称',
					width: '50%',
					unresize: 'false',
					templet: function(data) {
						var html = '';
						html += `
							<div>
							<img style="width:40px; height:40px; margin-right:20px;" layer-src src="${ns.img(data.headimg)}" onerror="this.src = '{:img(\'public/static/img/default_img/head.png\')}' "><span>${data.nickname}</span>
							</div>
						`;
						return html;
					}
				}, {
					field: 'balance',
					title: '余额',
					unresize: 'false',
					width: '15%',
				},{
					field: 'point',
					title: '积分',
					unresize: 'false',
					width: '15%',
				},
				]
			],
		});
		
		/**
		* 搜索功能
		*/
		form.on('submit(search)', function (data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
		});
	
		$(document).keydown(function (event) {
			if (event.keyCode == 13) {
				$(".member-search").trigger("click");
			}
		});
	}
</script>